<template>
    <div class="input">
        <div class="input-title">{{ title }}</div>
        <el-select v-show="isSelect" class="input-select" v-model="value" placeholder="Select">
            <!-- :是v-bind的形式，动态绑定变量的值 -->
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-container v-show="!isSelect" class="input-upload-container">
            <el-main class="input-upload-main">
                <el-input v-model="Form.filename" placeholder="选择文件"></el-input>
            </el-main>
            <el-aside class="input-upload-aside">
                <el-upload :show-file-list="false" :on-change="handleChange">
                    <button class="input-upload-btn"><el-icon color="rgb(169, 172, 179)">
                            <MoreFilled />
                        </el-icon></button>
                </el-upload>
            </el-aside>
        </el-container>
    </div>
</template>

<script>
import { MoreFilled } from "@element-plus/icons-vue"
export default {
    components: { MoreFilled },
    props: {
        //prop校验
        title: {
            type: String,
            required: false,
            default: "Task"
        },
        options: {
            type: Array,
            required: false,
            default: [
                {
                    value: 'Option1',
                    label: 'Option1',
                },
                {
                    value: 'Option2',
                    label: 'Option2',
                },
                {
                    value: 'Option3',
                    label: 'Option3',
                },
                {
                    value: 'Option4',
                    label: 'Option4',
                },
                {
                    value: 'Option5',
                    label: 'Option5',
                },
            ]
        },
        isSelect: {
            type: Boolean,
            required: false,
            default: true
        }
    },
    data() {//这样就可以在模板中直接使用变量
        return {
            value: '',
            Form: {
                filename: '',
            }
        };
    },
    methods: {
        handleChange(file) {
            this.Form.filename = file.name;
        }
    }
};
</script>
<style lang="scss" scoped>
$input-height: 70px;
$input-title-height: 22px;
$input-select-heigh: $input-height - $input-title-height;
$input-upload-aside-width: 6%;
$input-upload-container-height: 32px;

:deep .el-main {
    height: $input-upload-container-height !important;
    padding: 0;
}

:deep .el-input__wrapper {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

:deep .el-upload {
    height: 100% !important;
    display: block !important;
}

.input {
    
    .input-title {
        font-size: 14px;
        font-weight: 400;
        height: $input-title-height;
        line-height: $input-title-height;
        margin-bottom: 8px;
    }

    .input-select {
        height: $input-select-heigh;
    }

    .input-upload-container {
        .input-upload-aside {
            width: $input-upload-aside-width;
            overflow: hidden;

            .input-upload-btn {
                width: 100% !important;
                height: $input-upload-container-height;
                line-height: $input-upload-container-height;
                border: 0px;
                cursor: pointer;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }

            .input-upload-btn:hover {
                background-color: rgb(234, 234, 234);
            }
        }

        .input-upload-main {
            overflow: hidden;
        }
    }

}
</style>